<template>
    <div class="bb">
      <div class="denglu">
        <h1>登录</h1>
        <div class="box">
           <input type="text" placeholder="手机/用户名" v-model="phn">
        </div>
        <div class="box">
           <input type="password" placeholder="密码" v-model="pass">
        </div>
        <div class="button">
           <button  @click="button_click" >登录</button>
        </div>

    </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { admin_admin_login } from '../utils/api'
import { ref } from 'vue';
import {ElNotification}  from 'element-plus'
import "element-plus/es/components/notification/style/css"
const $router = useRouter();
const phn = ref("")
const pass = ref("")
  const button_click =()=>{
    if(phn.value!="" && pass.value!=""){
    admin_admin_login({
        adminname:phn.value,
        password:pass.value
    }).then((res: any) => {
  if (res.data.code === "200") {
    ElNotification({
        title:"提示",
        message: "登录成功",
        type: "success",
    })
    // 存储手机号
    sessionStorage.setItem("phn",phn.value)
    // 存储密码
    sessionStorage.setItem("pass",pass.value)
    // 存储token
    sessionStorage.setItem("token",res.data.data.token)
    // 存储当前用户的权限
    sessionStorage.setItem("grants",JSON.stringify(res.data.data.checkedkeys))
    // 跳到首页
    $router.push("/admin")
  }
})
    }else{
      ElNotification({
        title:"提示",
        message: "登录失败",
        type: "warning",
    })
    }
  }
</script>

<style scoped>
 *{
  margin: 0;
  padding: 0;
}

html,body{
  width: 100%;
  height: 100%;
}
.bb{
  background-image: url(https://img1.baidu.com/it/u=2347517481,1176720680&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=779);
  /* background-image: url(../img/55522F8788C0EF7BDAB056461FA4095D.jpg); */
  /* background-size: 25%; */
  width: 100%;
  height: 100%;
  /* padding: 20px; */
}
.denglu{
 width: 500px;
  height: 300px;
  left: 50%;
  top: 50%;
  position: fixed;
  transform: translate(-50%,-50%);
}
h1{
    /* padding-top:100px; */
    text-align: center;
}
.box{
    width: 400px;
    height: 40px;
    margin-left: 25x;
    margin-top: 10px;
}
input{
    width: 400px;
    height: 40px;
    border: none;
    margin-left: 50px;
    outline: none;
    border-bottom: 1px solid #ccc;
    font-size: 20px;
    background-color: aqua;
    border-radius: 15px;
}
.button{
    width: 300px;
    height: 80px;
    text-align: center;
}
button{
  margin-top: 10px;
  margin-left: 100px;
  width: 300px;
    height: 45px;
    border-radius: 45px;
    border: none;
    background-color: #ccc;
} 

</style>